import React, { Component, Fragment } from 'react';
import { Button, message, Upload, Alert } from 'antd';

// import { importIdleAssets } from '../../../../../api/server/IdleAssets.service';
import { limitUploadxlsx } from '../../utils/index';
import Modal from './importAlert.js';

/*
 * @Description: 组件所需传入参数
 * @function:importOk           ()=>{}  导入成功后刷新列表
 * @function:importFile         ()=>{}  //导入请求接口  ps:(v)=>{this.download(v)}
 * @function:downLoadError      ()=>{}   //导入失败时，下载原因的回调  只需传入方法和参数   ps:(v)=>{this.download(v)}
 */

class ImportBtn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isImportLoading: false,
      visible: false,
      importType: '',
      importNum: '',
      importId: '',
    };
  }
  /**
   * @函数描述: 批量导入
   * @param {String} file  文件名
   */
  handleUpload = async (file) => {
    const activityBasicId = this.props.activityBasicId;
    let fileData = new FormData(); //创建文件流
    if (limitUploadxlsx(file.file)) {
      fileData.append('file', file.file);
      fileData.append('activityBasicId', activityBasicId);
      this.setState({
        isImportLoading: true,
        visible: true,
        importType: 'importing',
      });
      let res;
      // res =await this.props.importFile(fileData);
      this.props.importFile(fileData).then(
        (res) => {
          this.setState({
            isImportLoading: false,
          });
          if (res && res.request && res.request.responseType == 'blob') {
            console.log('response', res);
            var reader = new FileReader();
            reader.onload = () => {
              var content = JSON.parse(reader.result); //内容就在这里

              try {
                if (content && content.code == 200) {
                  this.setState({
                    importType: 'imported',
                    visible: false,
                  });
                  setTimeout(() => {
                    this.setState({
                      importType: '',
                    });
                  }, 1500);
                  this.props.importOk();
                  message.success(content.message);
                } else {
                  if (content.data && content.data.importErrorId) {
                    this.setState({
                      importType: 'importerror',
                      importId: content.data.importErrorId,
                    });
                  } else {
                    this.onCancel();
                  }

                  message.error(content.message);
                }
              } catch {
                console.log('导入失败');
              }
            };
            reader.readAsText(res.data);
          }
        },
        (err) => {
          this.setState({
            isImportLoading: false,
          });
        },
      );
    }
  };

  onCancel = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { isImportLoading, visible, importType, importNum, importId } =
      this.state;
    const { type } = this.props;
    const params = {
      accept: '.xlsx,.xls',
      customRequest: this.handleUpload,
      fileList: [],
    };
    return (
      <Fragment>
        <Upload {...params}>
          <Button type="primary" loading={isImportLoading}>
            导入
          </Button>
        </Upload>
        {/* {
                    importType === 'imported' &&
                    (
                    <div style={{
                        position: 'absolute',
                        left: '35%',
                        top: 0,
                        width: '30%'
                    }}>
                        <Alert message="导入成功" type="success" showIcon closable />
                    </div>
                    )
                } */}

        {/* <Modal
                    visible={visible}
                    type={importType}
                    importNum={importNum}
                    importErrorId={importId}
                    downLoadError={(val)=>this.props.downLoadError(val)}
                    onCancel={this.onCancel} /> */}
      </Fragment>
    );
  }
}
export default ImportBtn;
